//表格行
let columns = [[
    {field: 'headPortraitUrl', title: '头像', align:'center', width:100, formatter: formatterImage},
    {field: 'username', title: '用户名', align:'center', width:100, formatter: formatterText},
    {field: 'phone', title: '手机号', align:'center', width:100, formatter: formatterText},
    {field: 'email', title: '邮箱', align:'center', width:100, formatter: formatterText},
    {field: 'registerDate', title: '注册日期', align:'center', width:100, formatter: formatterDate},
    {field: 'state', title: '状态', align:'center', width:100, formatter: formatterState},
    {field: '-', title: '空间占用', align:'center', width:300, formatter: formatterChart}
]];

$(function() {
    //文档加载完成后异步请求数据
    /*$.ajax({
        url: "admin_userListByPageWeb",
        type:'post',
        dataType:'json',
        fitColumns:true,
        success:function(value){
            //console.log(JSON.stringify(value));
            if(value.success) {
                //让数据表格加载数据
                $("#grid").datagrid("loadData", value.data);
            } else {
                $.messager.alert('提示',value.data, "info");
            }
        }
    });*/

    //数据表格初始化
    $('#grid').datagrid({
        url: "admin_userListByPageWeb",
        columns:columns,
        singleSelect:true,
        pagination:true,
        pageSize: 5,
        pageList: [5, 10, 15, 20, 30],
        onLoadSuccess: function(data) {
            console.log(data);
            let gridData = data.rows;
            for(let i = 0; i < gridData.length; i++) {
                let rowData = gridData[i];
                initChart(rowData.id, rowData.useSize, rowData.totalSize);
            }
        }
    });
});

//初始化图表
function initChart(id, useSize, totalSize) {
    let useSizeM = useSize / 1024 / 1024;
    let totalSizeM = totalSize / 1024 / 1024;
    var chart = {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    };
    var title = {
        text: ''
    };
    var tooltip = {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    };
    var plotOptions = {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    };
    var series= [{
        type: 'pie',
        name: '占用情况',
        data: [
            ['已使用', useSizeM],
            ['总空间', totalSizeM]
        ]
    }];

    var json = {};
    json.chart = chart;
    json.title = title;
    json.tooltip = tooltip;
    json.series = series;
    json.plotOptions = plotOptions;
    $('#' + id).highcharts(json);
}

//格式化图片
function formatterImage(value, row, index) {
    //console.log(value);
    if(value != null && value != "") {
        return "<img src='"+value+"' style=width:80px;height:80px;>";
    } else {
        return "-";
    }
}

//格式化文本内容
function formatterText(value, row, index) {
    //console.log(value);
    if(value && value != "" && value != " ") {
        return value;
    } else {
        return "-";
    }
}

//格式化日期
function formatterDate(value, row, index) {
    //console.log(value);
    if(value != null && value != "") {
        let formatDataString = new Date(value).Format("yyyy-MM-dd");
        //console.log(formatDataString);
        return formatDataString;
    } else {
        return "-";
    }
}

//格式化状态
function formatterState(value, row, index) {
    //console.log(value);
    if(value == 0) {
        return "正常";
    } else if(value == 1) {
        return "封禁";
    } else {
        return "-";
    }
}

//格式化图表
function formatterChart(value, row, index) {
    if(row != null) {
        return "<div id='" + row.id + "' style='width: 250px; height: 250px; margin: 0 auto'></div>";
        /*console.log(row.id);
        console.log(row.totalSize);
        console.log(row.useSize);*/
    } else {
        return "-"
    }

}